<template>
  <view class="my-likes-page">
    <view :class="['fade-in-all', showAll ? 'show' : '']">
      <view class="like-list">
        <view class="like-card" v-for="(item, idx) in likes" :key="idx">
          <view class="like-header">
            <text class="like-title">{{ item.title }}</text>
            <text class="like-time">{{ item.time }}</text>
          </view>
          <view class="like-body">
            <text class="like-desc">{{ item.desc }}</text>
            <image v-if="item.img" :src="item.img" class="like-img" mode="aspectFill"/>
          </view>
          <view class="like-footer">
            <view class="footer-item">
              <image src="/static/icons/heart.png" class="footer-icon" />
              <text>{{ item.likes }}</text>
            </view>
            <view class="footer-item">
              <image src="/static/icons/message1.png" class="footer-icon" />
              <text>{{ item.comments }}</text>
            </view>
            <view class="footer-item">
              <image src="/static/icons/eye.png" class="footer-icon" />
              <text>{{ item.views }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showAll: false,
      likes: [
        {
          title: '长者生日会',
          time: '2024-06-10 14:00',
          desc: '今天为多位长者举办了集体生日会，大家一起唱歌、切蛋糕，气氛温馨感人。',
          img: '/static/images/banner1.jpg',
          likes: 21,
          comments: 5,
          views: 88
        },
        {
          title: '健康操晨练',
          time: '2024-06-05 08:30',
          desc: '带领长者们做健康操，大家精神饱满，锻炼氛围浓厚。',
          img: '',
          likes: 17,
          comments: 2,
          views: 54
        },
        {
          title: '志愿者进社区',
          time: '2024-05-30 15:00',
          desc: '志愿者团队为长者们带来了精彩的文艺表演，大家掌声不断，笑声连连。',
          img: '/static/images/banner2.jpg',
          likes: 25,
          comments: 6,
          views: 102
        }
      ]
    }
  },
  onReady() {
    setTimeout(() => {
      this.showAll = true;
    }, 50);
  }
}
</script>

<style scoped>
.my-likes-page {
  min-height: 100vh;
  background: #fff;
  padding: 0;
}
.like-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 14px 16px 14px;
}
.like-card {
  background: #f7f8fa;
  border-radius: 12px;
  border: 1.5px solid #e0e0e0;
  box-shadow: 0 4px 16px rgba(91,184,172,0.10);
  padding: 14px 14px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.like-card:first-child {
  margin-top: 10px;
}
.like-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.like-title {
  font-size: 16px;
  font-weight: bold;
  color: #5bb8ac;
}
.like-time {
  font-size: 12px;
  color: #aaa;
}
.like-body {
  margin: 8px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.like-desc {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
}
.like-img {
  width: 100%;
  max-width: 100%;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  margin-top: 4px;
}
.like-footer {
  display: flex;
  gap: 18px;
  margin-top: 8px;
}
.footer-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #5bb8ac;
}
.footer-icon {
  width: 16px;
  height: 16px;
}
.fade-in-all {
  opacity: 0;
  transition: opacity 0.5s;
}
.fade-in-all.show {
  opacity: 1;
}
</style> 